<template>
  <div
    class="editor-image-btn"
    :class="size"
    @click="selectImage"
    :style="[
      modelValue == '' ? '' : 'backgroundImage: url(' + modelValue + ')',
    ]"
  >
    <div
      v-if="modelValue != ''"
      @click.stop="delImage"
      class="editor-image-del icon icon-cuo"
    ></div>
    <div class="editor-image-tips">{{ text }}</div>
  </div>
  <slot></slot>
  <mateSelectModal
    ref="mateSelectModalRef"
    @change="selectChange"
    :count="1"
  ></mateSelectModal>
</template>
  <script lang="ts">
export default {
  name: "storeDiyFormImageBtn",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance, watch, onMounted } from "vue";
import mateSelectModal from "@/components/mate/select-modal/index.vue";

const props = withDefaults(
  defineProps<{
    text?: string;
    modelValue: number | string | undefined;
    size?: string;
  }>(),
  {
    text: "点击设置图片",
    modelValue: "",
    size: "small",
  }
);
const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const mateSelectModalRef = ref<HTMLElement>();

const emit = defineEmits(["update:modelValue", "change"]);

const selectChange = (val: string) => {
  emit("update:modelValue", val);
  emit("change", val);
};

const selectImage = () => {
  proxy?.$refs["mateSelectModalRef"]?.open([]);
};

const delImage = () => {
  emit("update:modelValue", "");
  emit("change", "");
};
</script>
  <style scoped>
.editor-image-btn {
  position: relative;
  z-index: 1;
  cursor: pointer;
  border: 4px solid #ffffff;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(@/theme/image/upload-img.png);
}
.editor-image-btn.large {
  height: 160px;
  width: 100%;
  border: 1px solid var(--el-border-color);
}
.editor-image-btn.small {
  height: 80px;
  width: 80px;
  border: 1px solid  var(--el-border-color);
}
.editor-image-btn .editor-image-tips {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  z-index: 2;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  color: #ffffff;
}
.editor-image-del {
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.1);
  width: 14px;
  height: 14px;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  cursor: pointer;
}
</style>